<template>
  <div class="home">
    <div class="home-banner">
      <p>可信工作证</p>
      <p>由企业单位签发给成员的可信身份凭证</p>
      <p>
        依托国家“互联网+”可信身份认证平台与公信.中国主体核验技术，为企业组织及其从业人员提供权威、安全、便捷、可信的在线身份认证与识别服务
      </p>
    </div>
    <div class="home-box1">
      <h3 class="title">我们解决企业什么痛点？</h3>
      <div class="home-box1-text">
        <p>解决证件制作成本高，发证后无法变更信息的困扰</p>
        <p>解决发证过程中，人证不一，无法异地领证的问题</p>
        <p>解决无法甄别个人社会治安背景所产生的安全隐患</p>
        <p>实现个人与组织关系证件的灵活制作与发放管理</p>
        <p>为企业降本增效，传递信任</p>
      </div>
    </div>

    <div class="home-box2">
      <h3 class="title">新一代电子工作证</h3>
      <p class="home-box2-p1">高效、可靠的证件签发管理能力，大幅降低制证、领证成本</p>
      <ul class="ulCheck">
        <li>
          <img src="../../../assets/icon-1.png" alt="" />
          <p>证件签发灵活高效</p>
          <p>多样化的证件模板与灵活的发证方式；设置证照内容可随时变更，不受制证条件限制</p>
        </li>
        <li>
          <img src="../../../assets/icon-2.png" alt="" />
          <p>证件领用便捷可靠</p>
          <p>不受地域时间限制，无需现场发证与领证；人证比对，保障领证人的身份真实、可靠</p>
        </li>
        <li>
          <img src="../../../assets/icon-3.png" alt="" />
          <p>证件识别安全可信</p>
          <p>法定证件制证数据与企业授信构建可信凭证；多信任层级认证，脱敏识别持证人有效身份</p>
        </li>
      </ul>
    </div>
    <div class="home-box3">
      <div class="home-box3-box">
        <h3 class="title">产品功能</h3>
        <ul class="ulCheck clearfix">
          <li>
            <img src="../../../assets/icon-4.png" alt="" />
            <p>邀请申领</p>
            <p>提供证件申领模板，由申领人提报证件信息，审批通过后签发电子工作证</p>
          </li>
          <li>
            <img src="../../../assets/icon-5.png" alt="" />
            <p>批量发证</p>
            <p>采集发证对象个人信息，导入制证系统批量生成电子工作证并通知领证</p>
          </li>
          <li>
            <img src="../../../assets/icon-6.png" alt="" />
            <p>扫码领证</p>
            <p>领证人员无需现场操作，手机扫码验明身份后即可快速领取电子工作证</p>
          </li>
          <li>
            <img src="../../../assets/icon-7.png" alt="" />

            <p>限时管理</p>
            <p>可配置证件的领用时间和证件生效时间，系统自动开启或关闭证件有效性</p>
          </li>
          <li>
            <img src="../../../assets/icon-8.png" alt="" />

            <p>电子签章</p>
            <p>签发成功的电子工作证自动加盖签发单位的可信电子公章，并可一键验签</p>
          </li>
          <li>
            <img src="../../../assets/icon-9.png" alt="" />

            <p>证件照管理</p>
            <p>支持更换证件照片，更换时须通过人像核验，以确保证照一致，人证合一</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="home-box4">
      <div class="home-box4-box">
        <h3 class="title">应用流程</h3>
        <ul class="clearfix">
          <li><span>在线制作</span></li>
          <li><span>设置发证</span></li>
          <li><span>扫码领证</span></li>
          <li><span>现场亮证</span></li>
        </ul>
      </div>
    </div>

    <div class="home-box5">
      <h3 class="title">产品优势</h3>
      <ul class="ulCheck clearfix">
        <li>
          <img src="../../../assets/icon-11.png" alt="" />
          <p>权威</p>
          <p>采用公安部法定证件制证数据作为比对源，由法定电子认证机构签发数字证书，确保签发证件的权威有效</p>
        </li>
        <li>
          <img src="../../../assets/icon-13.png" alt="" />
          <p>安全</p>
          <p>更符合智能终端应用的公钥体制，没有存储介质要求，遗失后不会造成隐私泄漏，避免了盗用和冒用风险</p>
        </li>
        <li>
          <img src="../../../assets/icon-10.png" alt="" />
          <p>便捷</p>
          <p>结合个人身份与组织授权关系，形成多信任层级认证，更符合互联网应用要求，贴合工作身份识别场景</p>
        </li>

        <li>
          <img src="../../../assets/icon-12.png" alt="" />
          <p>可信</p>
          <p>以《居民身份证法》《电子签名法》以及各行各业条例法规为支撑，适用于全社会全行业的任职证明</p>
        </li>
      </ul>
    </div>

    <div class="home-box6">
      <h3 class="title">行业方案</h3>
      <ul class="ulCheck clearfix">
        <li>
          <img src="../../../assets/icon-14.png" alt="" />
          <div class="hy-text">
            <p>灵活用工</p>
            <p>
              为外部员工远程签发《临时工作证》，可根据需要灵活设置工作证的展示信息、证件有效期等，以提升对灵活用工人员的管理水平
            </p>
          </div>
        </li>
        <li>
          <img src="../../../assets/icon-15.png" alt="" />

          <div class="hy-text">
            <p>家政服务</p>
            <p>
              为家政服务人员签发并设置《上门服务工作证》及使用期限，供消费者验证上门人员的身份和服务时效，提升消费者的安全感与信任感
            </p>
          </div>
        </li>
        <li>
          <img src="../../../assets/icon-16.png" alt="" />

          <div class="hy-text">
            <p>展会展览</p>
            <p>
              对参展单位指派的参展人员远程签发《电子参展证》，在线领用，现场出示，大幅降低证件的制作成本，提高证件派发效率和安全性
            </p>
          </div>
        </li>
        <li>
          <img src="../../../assets/icon-17.png" alt="" />

          <div class="hy-text">
            <p>建筑工程</p>
            <p>
              为施工现场的临时施工、帮工人员远程签发《施工现场临时出入证》，现场核验领证人身份及安全属性，快速排查可疑人员
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="home-box7">
      <p>为企业传递可信形象</p>
      <a-button type="primary" class="home-box7-btn" @click="goIndex"> 立即体验 </a-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goIndex() {
      console.log(this.$store.getters.nickname)
      if (this.$store.getters.nickname) {
        this.$router.push({ name: 'news' })
      } else {
        this.$router.push({ name: 'login' })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
.home {
  ul {
    margin: 0;
    padding: 0;
  }
  &-banner {
    width: 100%;
    height: 360px;
    background: url('../../../assets/banner-home.png') no-repeat center;
    background-size: 100% 360px;
    padding: 107px 0 0 18%;
    box-sizing: border-box;
    p {
      color: #fff;
      margin-bottom: 23px;
    }
    p:first-child {
      font-size: 46px;
      font-weight: bold;
      line-height: 1;
    }
    p:nth-child(2) {
      font-size: 20px;
      line-height: 1;
    }
    p:last-child {
      width: 556px;
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 0;
    }
  }
  .title {
    font-size: 32px;
    font-weight: bold;
    color: #141921;
    text-align: center;
    margin-bottom: 40px;
  }
  .ulCheck > li:hover {
    box-shadow: 0px 4px 20px 0px rgba(10, 22, 51, 0.15);
    transform: translateY(-10px);
  }
  .ulCheck > li {
    width: 390px;
    height: 262px;
    margin-right: 15px;
    box-sizing: border-box;
    padding: 32px 32px 0;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 8px;
    border: solid 1px #e6e8eb;
    transition: all 0.5s;
    img {
      margin-bottom: 32px;
    }
    p:nth-child(2) {
      font-size: 16px;
      font-weight: bold;
      color: #141921;
      margin-bottom: 16px;
      line-height: 1;
      text-align: center;
    }
    p {
      font-size: 14px;
      line-height: 22px;
      color: #6e7278;
      width: 100%;
    }
  }
  &-box1 {
    width: 1200px;
    margin: 119px auto;
    .title {
      margin-bottom: 40px;
    }
    &-text {
      width: 100%;
      height: 497px;
      background: url('../../../assets/img-list4.png') no-repeat center;
      background-size: 100% 497px;
      position: relative;
      p {
        position: absolute;
        font-size: 16px;
        line-height: 1;
        color: #141921;
        margin-bottom: 0;
        font-weight: bold;
      }
      p:first-child {
        left: 81px;
        top: 87px;
      }
      p:nth-child(2) {
        left: 768px;
        top: 87px;
      }
      p:nth-child(3) {
        left: 81px;
        top: 312px;
      }
      p:nth-child(4) {
        left: 768px;
        top: 312px;
      }
      p:last-child {
        left: 420px;
        bottom: 24px;
        font-size: 30px;
        font-weight: bold;
        color: #3086ff;
      }
    }
  }
  &-box2 {
    width: 1200px;
    margin: 0 auto 80px;
    title {
      margin-bottom: 24px;
    }
    &-p1 {
      font-size: 16px;
      color: #6e7278;
      text-align: center;
      line-height: 1;
      margin-bottom: 40px;
    }
    ul {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 0;
      padding: 0;
      li:last-child {
        margin-right: 0;
      }
      // li:first-child {
      //   i {
      //     width: 113px;
      //     height: 96px;
      //     background: url('../../../assets/icon-1.png') no-repeat center;
      //     background-size: 113px 96px;
      //   }
      // }
      // li:nth-child(2) {
      //   i {
      //     width: 96px;
      //     height: 96px;
      //     background: url('../../../assets/icon-2.png') no-repeat center;
      //     background-size: 96px 96px;
      //   }
      // }
      // li:last-child {
      //   i {
      //     width: 96px;
      //     height: 96px;
      //     background: url('../../../assets/icon-3.png') no-repeat center;
      //     background-size: 96px 96px;
      //   }
      // }
    }
  }
  &-box3 {
    width: 100%;
    background-color: #f7f8fa;
    padding: 79px 0;
    &-box {
      width: 1200px;
      margin: 0 auto;
      .title {
        margin-bottom: 40px;
      }
      ul {
        margin: 0;
        padding: 0;
        li {
          float: left;
          margin-bottom: 16px;
          i {
            width: 96px;
            height: 96px;
          }
        }
        li:nth-child(3n) {
          margin-right: 0;
        }
        // li:first-child {
        //   i {
        //     background: url('../../../assets/icon-4.png') no-repeat center;
        //     background-size: 96px 96px;
        //   }
        // }
        // li:nth-child(2) {
        //   i {
        //     background: url('../../../assets/icon-5.png') no-repeat center;
        //     background-size: 96px 96px;
        //   }
        // }
        // li:nth-child(3) {
        //   i {
        //     background: url('../../../assets/icon-6.png') no-repeat center;
        //     background-size: 96px 96px;
        //   }
        // }
        // li:nth-child(4) {
        //   i {
        //     background: url('../../../assets/icon-7.png') no-repeat center;
        //     background-size: 96px 96px;
        //   }
        // }
        // li:nth-child(5) {
        //   i {
        //     background: url('../../../assets/icon-8.png') no-repeat center;
        //     background-size: 96px 96px;
        //   }
        // }
        // li:last-child {
        //   i {
        //     background: url('../../../assets/icon-9.png') no-repeat center;
        //     background-size: 96px 96px;
        //   }
        // }
      }
    }
  }
  &-box4 {
    width: 100%;
    height: 416px;
    background: url('../../../assets/img-bg-process.png') no-repeat center;
    background-size: 100% 416px;
    padding: 70px 0 65px;
    box-sizing: border-box;
    &-box {
      width: 1200px;
      margin: 0 auto;
      .title {
        color: #fff;
      }
      ul {
        li {
          width: 24%;
          height: 200px;
          float: left;
          padding: 132px 0 0 0;
          text-align: center;
          box-sizing: border-box;
          position: relative;
          margin-right: 16px;
          box-shadow: 0px 12px 24px 0px rgba(48, 134, 255, 0.6);
          span {
            font-size: 16px;
            font-weight: bold;
            line-height: 1;
            color: #222222;
          }
        }
        li:first-child {
          background: url('../../../assets/card-1-def.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:first-child:hover {
          background: url('../../../assets/card-1-pre.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:nth-child(2) {
          background: url('../../../assets/card-2-def.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:nth-child(2):hover {
          background: url('../../../assets/card-2-pre.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:nth-child(3) {
          background: url('../../../assets/card-3-def.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:nth-child(3):hover {
          background: url('../../../assets/card-3-pre.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:last-child {
          background: url('../../../assets/card-4-def.png') no-repeat center;
          background-size: 100% 200px;
          margin-right: 0;
        }
        li:last-child:hover {
          background: url('../../../assets/card-4-pre.png') no-repeat center;
          background-size: 100% 200px;
        }
        li:last-child::after {
          content: '';
          display: none;
        }
        li::after {
          display: block;
          content: '';
          position: absolute;
          top: 67px;
          right: -18px;
          width: 20px;
          height: 16px;
          background: url('../../../assets/img-arrow.png') no-repeat center;
          background-size: 20px 16px;
        }
      }
    }
  }
  &-box5 {
    width: 1200px;
    margin: 70px auto 119px;
    .title {
      margin-bottom: 40px;
    }
    ul {
      li {
        float: left;
        width: 288px !important;
        height: 282px !important;
        padding: 32px 22px 0 !important;
        i {
          width: 96px;
          height: 96px;
        }
      }
      // li:first-child {
      //   i {
      //     background: url('../../../assets/icon-10.png') no-repeat center;
      //     background-size: 96px 96px;
      //   }
      // }
      // li:nth-child(2) {
      //   i {
      //     background: url('../../../assets/icon-11.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      // li:nth-child(3) {
      //   i {
      //     background: url('../../../assets/icon-12.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      // li:last-child {
      //   margin-right: 0;
      //   i {
      //     background: url('../../../assets/icon-13.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      li:last-child {
        margin-right: 0;
      }
    }
  }
  &-box6 {
    width: 1200px;
    margin: 0 auto 80px;
    .ulCheck {
      li {
        float: left;
        width: 592px;
        height: 152px;
        margin-bottom: 26px;
        padding: 0 32px;
        flex-direction: row !important;
        img {
          width: 88px;
          height: 88px;
          margin: 0 32px 0 0;
        }
        .hy-text {
          flex: 1;
          padding-top: 32px;
          height: 100%;
          p {
            font-size: 14px;
            line-height: 22px;
            color: #6e7278;
            font-weight: normal;
            margin-bottom: 0;
            text-align: left;
          }
          p:first-child {
            font-size: 16px;
            font-weight: bold;
            line-height: 1;
            color: #141921;
            margin-bottom: 16px;
          }
        }
      }
      // li:first-child {
      //   i {
      //     background: url('../../../assets/icon-14.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      // li:nth-child(2) {
      //   i {
      //     background: url('../../../assets/icon-15.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      // li:nth-child(3) {
      //   i {
      //     background: url('../../../assets/icon-16.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      // li:last-child {
      //   i {
      //     background: url('../../../assets/icon-17.png') no-repeat center;
      //     background-size: 86px 86px;
      //   }
      // }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  &-box7 {
    width: 100%;
    height: 346px;
    background: url('../../../assets/img-bg-act.png') no-repeat center;
    background-size: 100% 346px;
    padding: 116px 0 0 0;
    text-align: center;
    box-sizing: border-box;
    p {
      font-size: 32px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      margin-bottom: 70px;
    }
    &-btn {
      width: 300px;
      height: 72px;
      background-color: #ffffff;
      border-radius: 36px;
      font-size: 32px;
      color: #3086ff;
      transition: all 0.5s;
    }
  }
}
</style>

<style lang="less">
.home-box7-btn:hover {
  transform: translateY(-10px) !important;
}
</style>